<template>
  <div class="room">
      <div class="surface">
          房间列表
      </div>
       <span class="el-icon-search"></span>
    <el-collapse class="collapse"  v-model="activeNames" @change="handleChange">
      <el-collapse-item class="collapseitem" title="筛选查询" name="1">
        <el-form ref="form" :model="form" label-width="90px">
            <div class="block">
                <span class="demonstration">楼栋 id : </span>
                    <el-cascader
                    v-model="form.id"
                    :options="options"
                    @change="handleChange">
                  
                    </el-cascader>
            <el-form-item label="房间号: " class="buildingid">
                <el-input v-model="form.buildingid"></el-input>
            </el-form-item>
            <el-form-item label="房间类型：" class="houseno">
                <el-input v-model="form.houseno"></el-input>
            </el-form-item>
            <el-form-item label="面积范围："  class="areas">
                <el-input placeholder="最大" v-model="form.areas"></el-input>
            </el-form-item>
            <el-form-item label="—" style="margin-left:-40px"  class="areas2">
                <el-input placeholder="最小" v-model="form.areas2"></el-input>
            </el-form-item>
              <el-form-item label="房间朝向：">
                <el-select style="width:100px" v-model="form.orientation" placeholder="请选择">
                <el-option label="区域一" value="orientation"></el-option>
            </el-select>
            </el-form-item>
            <el-row>
                <el-button style="margin-left:20px" type="primary" @click="getdata">查询</el-button>
            </el-row>
            </div>
        </el-form>
      </el-collapse-item>
    </el-collapse>
    <el-row :gutter="12">
  <el-col :span="22" style="margin-left:20px">
    <el-card shadow="always" class="kapian">
     <span class="el-icon-s-operation">数据列表</span>
        <el-button style="margin-left:20px" type="primary"  @click="dialogVisible = true">添加</el-button>
        <el-button type="danger" @click="delects">批量删除</el-button>
    </el-card>
  </el-col>
</el-row>
<!-- 表格 -->
     <el-table
    @selection-change="handleSelectionChange"
    :data="tableData"
    border
    style="width: 85%;margin-left:60px;margin-top:30px">
    <el-table-column
     type="selection">
    </el-table-column>
    <el-table-column
      prop="id"
      label="房间id">
    </el-table-column>
    <el-table-column
      prop="buildingid"
      label="楼号">
    </el-table-column>
     <el-table-column
      prop="building"
      label="房间号">
    </el-table-column>
     <el-table-column
      prop="areas"
      label="面积(平米)">
    </el-table-column>
     <el-table-column
      prop="type"
      label="房间类型">
    </el-table-column>
     <el-table-column
      prop="orientation"
      label="朝向">
    </el-table-column>
     <el-table-column
      label="操作"
      width="180">
      <template slot-scope="scope">
           <el-button type="success">修改</el-button>
      <el-button 
      type="danger"
      @click="deleteTableRom(scope.row.id)"
      >删除</el-button>
      </template>
    </el-table-column>
  </el-table>
    <el-dialog
              title="添加房屋"
              style="font-size: bold; text-align: center"
              :visible.sync="dialogVisible"
              width="30%"
              :before-close="handleClose"
            >
              <el-form
                :model="ruleForm"
                :rules="rules"
                ref="ruleForm"
                label-width="100px"
                class="demo-ruleForm"
              >
                <el-form-item label="楼号" prop="buildingid">
                  <el-select v-model="ruleForm.buildingid">
                    <el-option label="九洲华庭" value="15"></el-option>
                    <el-option label="汤臣一品" value="14"></el-option>
                  </el-select>
                </el-form-item>
                <el-form-item label="房间号" prop="houseno">
                  <el-input v-model="ruleForm.houseno"></el-input>
                </el-form-item>
                <el-form-item label="房间面积(平米)" prop="areas">
                  <el-input v-model="ruleForm.areas"></el-input>
                </el-form-item>
                <el-form-item label="房间类型" prop="type">
                  <el-select v-model="ruleForm.type">
                    <el-option label="1室" value="1室"></el-option>
                    <el-option label="2室" value="2室"></el-option>
                    <el-option label="3室" value="3室"></el-option>
                    <el-option label="4室" value="4室"></el-option>
                    <el-option label="5室" value="5室"></el-option>
                    <el-option label="6室" value="6室"></el-option>
                  </el-select>
                  </el-form-item>
               
                <el-form-item label="朝向" prop="orientation">
                  <el-select v-model="ruleForm.orientation">
                    <el-option label="向南" value="向南"></el-option>
                    <el-option label="向北" value="向北"></el-option>
                  </el-select>
                </el-form-item>
              </el-form>

            

              <footer slot="footer" class="dialog-footer">

                <el-button @click="dialogVisible = false" class="btn"
                  >取 消</el-button
                >
                <el-button type="primary" @click="submitaddform" class="btnn"
                  >确 定</el-button
                >

             

              </footer>

            </el-dialog>
            <Pagination 
             :total="total"
            @changePage="getdata"/>
  </div>
</template>

<script>
import axios from 'axios'



import {delects,add,roomdelect} from '../utils/utils'
import Pagination from '../components/common/Pagination.vue';

 export default {
  components: { Pagination },
    data() {
      return {
         total:0,
        qwert:'',
        // 添加
        ruleForm: {
            id: "",
            buildingid: "",
            houseno:"",
            houseno: "",
            type: "",
            orientation: "",
        },
            rules: {
        id: [{ required: true, trigger: "blur" }],
        building: [
          { required: true, trigger: "blur" },
          { min: 3, max: 5, message: "长度在 3 到 10 个字符", trigger: "blur" },
        ],
        houseno: [
          { required: true, trigger: "blur" },
          { min: 3, max: 5, message: "长度在 3 到 10 个字符", trigger: "blur" },
        ],
        areas: [
          { required: true, trigger: "blur" },
          { min: 3, max: 5, message: "长度在 3 到 10 个字符", trigger: "blur" },
        ],
        type: [{ required: true, trigger: "blur" }],
        orientation: [{ required: true, trigger: "blur" }],
      },
        // 添加
         dialogVisible: false,
        // 表格
         tableData: [],
        //   折叠面板
        activeNames: ['0'],
        form: {
              key:'',	//否	string	搜索关键字
              areas:'',	//否	int	房间面积范围1
              areas2:'',	//否	int	房间面积范围2
              orientation:'',	//否	string	房朝向
              type:'',	//否	string	房间类型(如：3室)
              buildingid:'',	//否	int	楼栋id
              page:1,	//否	int	当前页码
              psize:5
        },
         options: [{
          value: 'zhinan',
          label: '指南',
          children: [{
            value: 'shejiyuanze',
            label: '设计原则',
            children: [{
              value: 'yizhi',
              label: '一致'
            }, {
              value: 'fankui',
              label: '反馈'
            }, {
              value: 'xiaolv',
              label: '效率'
            }, {
              value: 'kekong',
              label: '可控'
            }]
          }, {
            value: 'daohang',
            label: '导航',
            children: [{
              value: 'cexiangdaohang',
              label: '侧向导航'
            }, {
              value: 'dingbudaohang',
              label: '顶部导航'
            }]
          }]
        }]    
      };
    },
    mounted(){
      this.login()
      this.getdata()
    },
    methods: {
    handleSizeChange (val) {
      this.form.psize = val
      this.getdata()
    },
    handleCurrentChange (val) {
      this.form.page = val
       this.getdata()
    },
      // 删除
      deleteTableRom(e){
        const id =e
        const token =sessionStorage.getItem('token')        
        const parms={
          Authorization:token,
        }
        this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
              confirmButtonText: '确定',
              cancelButtonText: '取消',
              type: 'warning'
            }).then(()=>{
                axios.get('http://estate.eshareedu.cn/estate/api/houses/delete?id='+id,{headers:parms}).then(res=>{
              console.log(res);
              this.tableData=[]
                this.getdata()
          })
          this.$message({
            type:'success',
            message:'删除成功'
          })
        }).catch(()=>{
          this.$message({
            type:'info',
            message:'已取消删除'
          })
        })
      },
      // 劈山
      handleSelectionChange(val){
        this.qwert=val
      },
      async delects(){
        // console.log(123);
        if (this.qwert.length==0) {
          this.$message({
            type:'warning',
            message:'请勾选你删除的数据'
          })
        }else{
          let ids=[]
          this.qwert.forEach(item=>{
            ids.push(item.id)
          })
          let res=await delects ({
            ids:ids
          })
          if (res.errCode=='10000') {
            this.$message({
              type:'success',
              message:'删除成功'
            })
            this.getdata()
          }
        }
      },
      // 添加
      async submitaddform(){
        this.dialogVisible=false
       let res=await add({
                id:0,
                buildingid: this.ruleForm.buildingid,
                houseno:this.ruleForm.houseno,
                areas:this.ruleForm.areas,
                type:this.ruleForm.type,
                orientation:this.ruleForm.orientation
       })
       console.log(res,'添加');
        if (res.errCode=='10000') {
          this.$message({
            type:'success',
            message:'添加成功'
          })
          this.getdata()
        }
      },
      // 添加
        handleClose(done) {
        this.$confirm('确认关闭？')
          .then(_ => {
            done();
          })
          .catch(_ => {});
      },
      // token
      login(){
        axios.post('http://estate.eshareedu.cn/estate/api/administrator/checklogin',{username:'qqq',pass:'qqq'}).then((res)=>{
          // console.log(res);
          const {token}=res.data.data
          // console.log(token);
          sessionStorage.setItem("token",token)
        })
      },
      // 列表
      getdata(param){
        const token=sessionStorage.getItem("token",token)
        const header={
          Authorization:token
        }
        axios.get('http://estate.eshareedu.cn/estate/api/houses/list',{headers:header,params:Object.assign(this.form,param)}).then(res=>{
          console.log(res);
          const{errCode,errMsg}=res.data
          if (errCode==10000) {
            this.tableData=res.data.data.list
             this.total=res.data.data.counts
          }
        })
      },
        // 级联选择器
         handleChange(value) {
        console.log(value);
      },
        // 折叠面板
      handleChange(val) {
        console.log(val);
      }
    }
  }
</script>

<style  scoped>
.shuangxiala{
  width: 100%;
  display: flex;
  /* justify-content: space-around; */
}
.kapian{
  display: flex;
  align-items: center;
}
.block{
  display: flex;
  flex-wrap: wrap;
}
.room{
    position: relative;
}
.collapse{
    width: 90%;
    margin-left: 30px;
    margin-top: 12px;
}
.el-icon-search{
    position: absolute;
    top: 50px;
    left: 38px;
}
.surface{
    width: 90%;
    margin-left: 30px;
    color: blue;
}
.collapseitem{
    margin-left: 30px;
    /* margin-top: 0spx; */
}
.name{
    width: 180px;
}
.scope{
  width: 150px;
}
  /* align-items: center; */
  /* align-items: center; */
.demonstration{
  /* position: absolute;
  top: 80px;
  left: 0px; */
  margin-top: 5px;
  margin-right:5px ;
}
</style>

